import { Dom } from '@antv/x6'
import config, { portAttrs } from '../config'

export default {
  width: config.nodeWidth,
  height: config.nodeHeight,
  angle: config.nodeAngle,
  attrs: {
    body: {
      stroke: config.nodeStroke,
      strokeWidth: config.nodeStrokeWidth,
      fill: config.nodeBgColor
    },
    fo: {
      refWidth: '100%',
      refHeight: '100%'
    },
    foBody: {
      xmlns: Dom.ns.xhtml,
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }
    },
    'edit-text': {
      contenteditable: 'false',
      class: 'x6-edit-text',
      style: {
        width: '100%',
        textAlign: 'center',
        fontSize: config.nodeFontSize,
        color: config.nodeFontColor
      }
    },
    text: {
      fontSize: config.nodeFontSize,
      fill: config.nodeFontColor,
      textAlign: 'left'
    },
    data: {
      width: config.nodeWidth,
      height: config.nodeHeight,
      angle: config.nodeAngle
    },
    outline: {
      fill: 'none',
      stroke: config.nodeStroke,
      strokeWidth: 1
    },
    filled: {
      fill: config.nodeStroke,
      stroke: config.nodeStroke
    }
  },
  markup: [
    {
      tagName: 'text',
      selector: 'text'
    },
    {
      tagName: 'foreignObject',
      selector: 'fo',
      children: [
        {
          ns: Dom.ns.xhtml,
          tagName: 'body',
          selector: 'foBody',
          children: [
            {
              tagName: 'div',
              selector: 'edit-text'
            }
          ]
        }
      ]
    }
  ],
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: portAttrs
      },
      right: {
        position: 'right',
        attrs: portAttrs
      },
      bottom: {
        position: 'bottom',
        attrs: portAttrs
      },
      left: {
        position: 'left',
        attrs: portAttrs
      }
    }
  }
}
